<template>
  <div>
    <!-- 导航栏 -->
    <van-nav-bar
      class="bac"
      title="商品详情"
      left-arrow
      @click-left="$router.back()"
    />
    <!-- 详情内容渲染 -->
    <div>
      <img
        class="imgSize"
        :src="
          detailList.img
            ? $imgUrl + detailList.img
            : 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1870521716,857441283&fm=26&gp=0.jpg'
        "
        alt=""
      />
    </div>
    <p class="title">{{ detailList.goodsname }}</p>
    <p>
      <!-- 先隐式转换为 Number类型 ,否则保留两位数字时会报错-->
      <span class="price"
        >￥ {{ (detailList.market_price * 1).toFixed(2) }}</span
      >
      <span class="priceInfo"> (此价格不与套装优惠同时享受)</span>
    </p>
    <!-- Stepper 步进器  -->
    <div>
      <p class="buyNum">
        <span class="title">购买数量</span>
        <van-stepper class="numinp" v-model="num" />
      </p>
    </div>
    <div>
      <p class="title">商品属性</p>
      <p>
        <span class="title"> {{ detailList.specsname }} </span>
        <van-tag
          type="success"
          class="attr"
          v-for="attr in attrList"
          :key="attr"
          >{{ attr }}</van-tag
        >
      </p>
      <p class="title">
        商品详情
        <span v-html="detailList.description" class="sayGood"></span>
      </p>
      <div>
        <p class="title">商品评论</p>
      </div>
    </div>
    <!-- 商品导航 -->
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" color="#ee0a24" />
      <van-goods-action-icon icon="cart-o" text="购物车" />
      <van-goods-action-button
        @click="toCart"
        type="warning"
        text="加入购物车"
      />
      <van-goods-action-button @click="toBuy" type="danger" text="立即购买" />
    </van-goods-action>
  </div>
</template>

<script>
//引入封装好的接口
import { getGoodsInfo, addCart } from "../util/axios";
import { Toast } from "vant";
//调用弹框要引入一下
import { Dialog } from "vant";
export default {
  data() {
    return {
      detailList: {}, //商品详情
      num: 0, //购买数量
      attrList: [] //商品属性
    };
  },
  mounted() {
    //组件一加载就调取商品详情接口
    getGoodsInfo({
      // 传入id,id为必传项
      id: this.$route.query.id
    }).then(res => {
      // console.log(res, "打印的商品详情");
      if (res.code == 200) {
        this.detailList = res.list[0];
        // 将字符串转换为数组
        this.attrList = res.list[0].specsattr
          ? res.list[0].specsattr.split(",")
          : [];
      }
    });
  },
  methods: {
    //跳转购物车事件
    toCart() {
      //已登录的状态，跳转到购物车页面并调取添加购物车接口
      if (sessionStorage.getItem("userInfo")) {
        //调取添加接口
        addCart({
          uid: JSON.parse(sessionStorage.getItem("userInfo")).uid,
          num: this.num,
          goodsid: this.detailList.id
        }).then(res => {
          Toast.success(res.msg);
          //跳转到购物车列表
          this.$router.push({
            path: "/cart",
            query: {
              uid: JSON.parse(sessionStorage.getItem("userInfo")).uid
            }
          });
        });
      } else {
        //未登录的状态让其去登录
        this.$router.push("/login");
      }
    },
    //跳转到订单页
    toBuy() {
      Dialog.alert({
        message: "买什么买，快去学习！！！"
      });
    }
  }
};
</script>

<style lang="" scoped>
.bac {
  background: #ff6040;
}

.imgSize {
  width: 100%;
  height: 20rem;
}

p {
  margin: 1rem 1rem 1rem 1rem;
}

.buyNum {
  display: flex;
  justify-content: space-between;
}

.title {
  font-size: 24px;
}

.attr {
  padding: 4px 5px;
  font-size: 16px;
  margin-right: 1rem;
}

.price {
  font-size: 20px;
  font-weight: bolder;
  color: red;
}
.priceInfo {
  font-size: 18px;
  font-weight: bolder;
  color: rgb(81, 81, 88);
}
.van-stepper {
  display: inline-block;
}

.sayGood {
  font-size: 16px;
}
</style>
